<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script lang="javascipt">
    // 实现一个浅拷贝
    function shallowClone(obj){
      const newObj = {}
      for(let prop in obj){
        if(obj.hasOwnProperty(prop)){
          newObj[prop] = obj[prop]
        }
      }
      return newObj
    }
    var obj = {
      name:'nihao',
      ages:{
        age1:11,
        age2:12
      }
    }
    var newObj=  shallowClone(obj)
    console.log('obj',obj,'newobj',newObj)
    // 浅拷贝只复制属性指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存，修改对象属性会影响原对象

    // 如果拷贝的属性是基本类型，拷贝的是基本类型的值；拷贝生成的值与原数值相互独立，修改其中一个不会影响另一个的值
    // 如果拷贝的属性是引用类型，拷贝的是引用类型所在的引用地址；修改其中一个会影响另一个的值
    
    obj.name='lisan'
    newObj.name='zhaosi'
    obj.ages.age1 = 20
    newObj.ages.age2=19
    console.log('obj',obj,'newobj',newObj)


    // js中的浅拷贝 【常用】
    // 1.Object.assign(target,source)
    // var obj = {
    //       age: 18,
    //       nature: ['smart', 'good'],
    //       names: {
    //           name1: 'fx',
    //           name2: 'xka'
    //       },
    //       love: function () {
    //           console.log('fx is a great girl')
    //       }
    //   }
    //   var newObj = Object.assign({}, obj);
    //   console.log(newObj);
    

    // 2.slice()
    // const fxArr = ["One", "Two", "Three"]
    // const fxArrs = fxArr.slice(0)
    // fxArrs[1] = "love";
    // console.log(fxArr) // ["One", "Two", "Three"]
    // console.log(fxArrs) // ["One", "love", "Three"]


    // 3.concat()
    // const fxArr = ["One", "Two", "Three"]
    // const fxArrs = fxArr.concat()
    // fxArrs[1] = "love";
    // console.log(fxArr) // ["One", "Two", "Three"]
    // console.log(fxArrs) // ["One", "love", "Three"]

    // 4.拓展运算符 【常用】
    // const fxArr = ["One", "Two", "Three"]
    // const fxArrs = [...fxArr]
    // fxArrs[1] = "love";
    // console.log(fxArr) // ["One", "Two", "Three"]
    // console.log(fxArrs) // ["One", "love", "Three"]
  </script>
</body>
</html>